<template>
<view class="tab-view">
<!-- 	<scroll-view id="tab-bar" class="scroll-h" scroll-x :show-scrollbar="false" :scroll-into-view="scrollInto" @scroll="">
		<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="tabtap(index)">
		    <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
		</view>
	</scroll-view> -->
	<scroll-view scroll-x class="uni-swiper-tab">
		<block v-for="(tab,index) in tabBars" :key="tab.id">
			<view class="swiper-tab-list" 
			:class="{'active':tabIndex==index}"
			@tap="tabtap(index)">
				{{tab.name}}
				<view class="swiper-tab-line"></view>
			</view>
		</block>
	</scroll-view>
</view>
</template>

<script>
export default {
	props:{
		tabBars:Array,
		tabIndex:Number
	},
	data() {
		return {
			scrollInto:'',
		}
	},
	methods:{
		tabtap(index){
			this.$emit('tabtap',index)
		},
	}
}
</script>

<style>
/* 	.scroll-h {
	    width: 750upx;
	    height: 80upx;
	    flex-direction: row;
	    white-space: nowrap;
	}
	.uni-tab-item {
	    display: inline-block;
	    flex-wrap: nowrap;
	    padding-left: 34upx;
	    padding-right: 34upx;
	}
	
	.uni-tab-item-title {
	    color: #555;
	    font-size: 30upx;
	    height: 80upx;
	    line-height: 80upx;
	    flex-wrap: nowrap;
	    white-space: nowrap;
	}
	
	.uni-tab-item-title-active {
	    color: #007AFF;
	} */
	
	.uni-swiper-tab{
		border-bottom: 1upx solid #EEEEEE;
	}
	.swiper-tab-list{
		color: #969696;
		font-weight: bold;
		width: 90upx;
	}
	.uni-tab-bar .active{
		color: #343434;
	}
	.active .swiper-tab-line{
		/* border-bottom: 3upx solid #FEDE33; */
		border-bottom: 3upx solid #1465A7;
		width: 70upx;
		margin: auto;
		border-top: 3upx solid #1465A7;
		border-radius:20upx;
	}
</style>
